const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoadPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')

const webpackconfig = {
    entry:'./src/main.js',
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'./dist')
    },
    watch:true,
    module:{
        rules:[{
            test:/\.vue$/,
            loader:'vue-loader'
        },{
            test:/\.js$/,
            exclude:/node_modules/,
            use:[
                {
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env'],
                        plugins:['@babel/plugin-transform-runtime']
                    }
                }
            ]
        },{
            test:/\.css$/,
            use:[
                MiniCssExtractPlugin.loader,
                {
                    loader:'css-loader',
                    options:{
                        importLoaders:1
                    }
                },{
                    loader:'postcss-loader'
                }
            ]
        },{
            test:/\.less$/,
            use:[
                MiniCssExtractPlugin.loader,
                {
                    loader:'css-loader',
                    options:{
                        importLoaders:1
                    }
                },{
                    loader:'postcss-loader'
                },
                'less-loader'
            ]
        },{
            test:/\.(jpg)|(png)|(svg)|(gif)|(woff)|(eot)|(ttf)/,
            loader:'url-loader',
            options:{
                limit:80000,
                name:'[hash:8].[name].[ext]'
            }
        }]
    },
    devServer:{
        contentBase:'./dist',
        historyApiFallback:true,
        inline:true,
        proxy:{
            '/apibaidu':{
                target:'http://tingapi.ting.baidu.com',
                changeOrigin:true,
                pathRewrite:{
                    '^/apibaidu':''
                }
            },
            '/apikugou':{
                target:'http://m.kugou.com',
                changeOrigin:true,
                pathRewrite:{
                    '^/apikugou':''
                }
            }
        }
    },
    resolve:{
        alias:{
            '@':path.resolve(__dirname)
        },
        extensions:['*', '.js', '.json', '.vue']
    },
    plugins:[
        new htmlWebpackPlugin({
            title:'STUDY CONTENT',
            template:'index.html',
            filename:'index.html',
            inject:'body',
            hash:true
        }),
        new MiniCssExtractPlugin({
            filename:'[name].css'
        }),
        new VueLoadPlugin,
        new webpack.ProvidePlugin({
            vue:['vue/dist/vue.esm.js','default'],
            $:'jquery',
            jQuery:'jquery',
            "window.jQuery":'jquery'
        })
    ]
}

module.exports = webpackconfig